<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="business-tabs">
            <el-tabs v-model="tabsName" @tab-click="handleClick">

              <el-tab-pane label="待审核商品" name="0"></el-tab-pane>  <!--   -6     -->
              <el-tab-pane label="上架中商品" name="1"></el-tab-pane>  <!--   -3     -->
              <el-tab-pane label="下架商品" name="2"></el-tab-pane>    <!--   -4     -->
            </el-tabs>
          </div>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">
            <el-row>
              <el-form class="form" label-width="100px" :model="goodsParams">

                <el-col :span="8">
                  <el-form-item label="商家编号">
                    <el-input v-model="goodsParams.shopCode" size="mini" placeholder="请输入商家编号"></el-input>
                  </el-form-item>
                  <el-form-item label="商品编号">
                    <el-input v-model="goodsParams.id" size="mini" placeholder="请输入商品编号"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商家名称">
                    <el-input v-model="goodsParams.shopName" size="mini" placeholder="请输入商家简称"></el-input>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <el-input v-model="goodsParams.title" size="mini" placeholder="请输入商品简称"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item></el-form-item>
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>

            <div class="table-wrapper">
              <el-table
                :data="goodsList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >

                <el-table-column
                  type="selection"
                  align='center'
                  width="50">
                </el-table-column>
                <el-table-column
                  v-if="tabsName == 1 || tabsName == 2"
                  prop="putwayDate"
                  label="上架时间"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  v-if="tabsName == 2"
                  prop="shelvesDate"
                  label="下架时间"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  v-if="tabsName == 0"
                  prop="auditDate"
                  label="提交时间"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="bid"
                  label="商家编号"
                  align='center'
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="shopName"
                  label="商家名称"
                  align='center'
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="商品编号"
                  align='center'
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="商品名称"
                  align='center'
                  width="150"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>

                <!--                <el-table-column-->
                <!--                  label="商品类型"-->
                <!--                  align='center'-->
                <!--                  width="120">-->
                <!--                  <template slot-scope="scope">-->
                <!--                    <span v-if="scope.row.type == 0">优惠</span>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="originalPrice"
                  label="原价"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="售价"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="库存"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="serviceTel"
                  label="联系电话"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="scale"
                  label="养老金比例"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作"
                  width="180">
                  <template slot-scope='scope'>
                    <el-col v-if="tabsName == 1">
                      <el-button
                        type="text"
                        size="mini"
                        @click='goGoodDialog(scope.row)'
                      >
                        查看商品
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='getGoodsFunc(scope.row,2)'
                      >
                        下架
                      </el-button>
                    </el-col>
                    <el-col v-if="tabsName == 0">
                      <el-col>
                        <el-button
                          type="text"
                          size="mini"
                          @click='goGoodDialog(scope.row)'
                        >
                          查看商品
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click='goEditDialog(scope.row)'
                        >
                          编辑商品
                        </el-button>
                      </el-col>
                      <el-col>
                        <el-button
                          type="text"
                          size="mini"
                          @click='getGoodsFunc(scope.row,2,-1)'
                        >
                          审核驳回
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click='getGoodsFunc(scope.row,1)'
                        >
                          审核通过
                        </el-button>
                      </el-col>
                    </el-col>
                    <el-col v-if="tabsName == 2">
                      <el-col>
                        <el-button
                          type="text"
                          size="mini"
                          @click='goGoodDialog(scope.row)'
                        >
                          查看商品
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click='getGoodsFunc(scope.row,0)'
                        >
                          上架
                        </el-button>
                      </el-col>
                      <el-col>
                        <el-button
                          type="text"
                          size="mini"
                          @click='getGoodsFunc(scope.row,3,scope.$index)'
                        >
                          删除
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click='getRejectReason(scope.row,3,scope.$index)'
                        >
                          驳回反馈
                        </el-button>
                      </el-col>
                    </el-col>
                  </template>
                </el-table-column>
              </el-table>

              <div class="table-footer">
                <el-row>
                  <el-col>
                    <el-button @click="showDialog(2)" size="small"
                               v-if="tabsName == 1">
                      下架
                    </el-button>
                    <el-button @click="showDialog(1)" size="small"
                               v-if="tabsName == 0">审核通过
                    </el-button>
                    <el-button @click="showDialog(0)" size="small"
                               v-if="tabsName == 2">上架
                    </el-button>
                    <el-button @click="showDialog(3)" size="small"
                               v-if="tabsName == 2">删除
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

          <!-- 删除提示框 -->
          <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow(goodsFuncParams.index)">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 查看商品提示框 -->
          <el-dialog :visible.sync="seeVisible" width="500px" center :modal-append-to-body="false">
            <div class="el-dialog-div">
              <el-form :model="goodsInfoList">
                <el-row>
                  <el-col>
                    <el-form-item label="商品名称:"><span>{{goodsInfoList.title}}</span></el-form-item>
                    <el-form-item label="商品分类:"><span>{{goodsInfoList.tagName}}</span></el-form-item>
                    <!--                    <el-form-item label="商品类型:"><span v-if="goodsInfoList.type == 0">优惠商品</span></el-form-item>-->
                  </el-col>

                  <el-col>
                    <el-form-item label="商品描述:"><span>{{goodsInfoList.info}}</span></el-form-item>
                    <el-form-item label="商品原价:"><span>{{goodsInfoList.originalPrice}}</span></el-form-item>
                  </el-col>

                  <el-col>
                    <el-form-item label="商品售价:"><span>{{goodsInfoList.price}}</span></el-form-item>
                    <el-form-item label="商品库存:"><span>{{goodsInfoList.num}}</span></el-form-item>
                    <el-form-item label="兑换期效:">
                      <span v-if="goodsInfoList.endTime == '' || goodsInfoList.endTime == null">长期</span>
                      <span v-else>{{goodsInfoList.endTime | formatDate}}</span>
                    </el-form-item>
                    <el-form-item label="商品图片:">
                      <img :src="goodsInfoList.img" width="60">
                    </el-form-item>
                    <el-form-item label="商品详情图:">
                      <div v-for="(item,index) in goodsInfoList.productImageList" :key="index" class="img-div">
                        <img :src="item.url" width="60">
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div slot="footer"></div>
          </el-dialog>

          <!-- 编辑商品提示框 -->
          <el-dialog :visible.sync="editVisible" width="500px" center :modal-append-to-body="false">
            <div class="el-dialog-div">
              <el-form :model="goodsInfoList" label-width="100px">
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="商品名称:">
                      <el-input v-model="goodsInfoList.title" size="mini" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类:">
                      <el-select v-model="goodsInfoList.tagId" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in goodsType"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                          <span style="float: left">{{ item.title }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商品描述:">
                      <el-input v-model="goodsInfoList.info" size="mini" placeholder="请输入商品描述"></el-input>
                    </el-form-item>
                    <el-form-item label="商品原价:">
                      <el-input v-model="goodsInfoList.originalPrice" size="mini" placeholder="请输入商品原价"></el-input>
                    </el-form-item>
                    <el-form-item label="商品售价:">
                      <el-input v-model="goodsInfoList.price" size="mini" placeholder="请输入商品售价"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存:">
                      <el-input v-model="goodsInfoList.num" size="mini" placeholder="请输入商品库存"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换期效:">
                      <el-date-picker
                        v-model="goodsInfoList.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="选择日期"
                        @change="chooseTimeRange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="商品图片:">
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleGoodsLogoSuccess">
                        <img width="60%" v-if="goodsInfoList.img" :src="goodsInfoList.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="商品详情图:">
                      <div>
                        <el-upload
                          class="upload-demo"
                          action="http://www.ccppvip.com:8081/upload"
                          :limit="4"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :on-success="handleImgListSuccess"
                          :file-list="goodsInfoList.productImageList"
                          list-type="picture">
                          <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :offset="3" :span="20">
                    <el-form-item>
                      <el-button type="primary" @click="getGoodsEdit()">保存</el-button>
                      <!--                      <el-button @click="clearForm()">重置</el-button>-->
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-dialog>

          <!-- 审核驳回提示框 -->
          <el-dialog :visible.sync="rejectVisible" :modal-append-to-body="false">
            <el-form :model="goodsFuncParams">
              <el-row>
                <el-col>
                  <el-col :span="16">
                    <el-form-item label="驳回理由">
                      <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入"
                        v-model="goodsFuncParams.refushReason"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-button type="primary" @click="getReject()">提交</el-button>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
          </el-dialog>

          <!-- 审核驳回原因提示框 -->
          <el-dialog :visible.sync="reasonVisible" :modal-append-to-body="false">
            <el-row>
              <el-col>
                驳回理由：{{refushReason}}
              </el-col>
            </el-row>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { businessGoodsList, goodsInfo, goodsEdit, goodsAllFuc } from '../../api/api'
import { MessageBox } from 'element-ui'

let img = ''
export default {
  data () {
    return {
      imageUrl: '',
      dialogFormVisible: false,
      goodsList: [],
      tabsName: '0',
      loading: true,
      goodsParams: {
        shopName: '',
        shopCode: '',
        title: '',
        id: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId')
      },
      pageTotal: 0,
      goodsFuncParams: {
        refushReason: '',
        index: 0,
        id: '',
        type: ''
      },
      goodsType: [],
      value: '',
      rejectValue: '',
      searchParams: {
        mobile: '',
        shopName: '',
        classifyId: '',
        shopCode: '',
        userId: sessionStorage.getItem('userId')
      },
      rejectParams: {},
      multipleSelection: [],
      frozenList: [],
      editForm: [],
      delVisible: false,
      seeVisible: false,
      goodsInfoList: {
        productImageList: [],
        productId: '',
        img: '',
        endTime: ''
      },
      editVisible: false,
      idsList: [],
      rejectVisible: false,
      reasonVisible: false,
      refushReason: ''
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    chooseTimeRange (value) {
      this.goodsInfoList.endTime = value
    },
    submitSearch () {
      this.getGoodsList()
    },
    // 格式化表单数据
    clearForm () {
      this.goodsParams = {
        shopName: '',
        shopCode: '',
        title: '',
        id: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId')
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
      this.getGoodsList()
    },
    showDialog (type) {
      const length = this.multipleSelection.length
      // 转换shopIDS 数组为字符串
      this.idsList = []
      for (let i = 0; i < length; i++) {
        this.idsList.push(this.multipleSelection[i].id)
      }
      this.idsList = this.idsList.join(',')
      this.goodsFuncParams.type = type
      if (this.multipleSelection.length !== 0) {
        this.getGoodsAllFuc()
      } else {
        MessageBox.alert('至少选择一项', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    getGoodsAllFuc () {
      const para = Object.assign({}, {
        ids: this.idsList,
        type: this.goodsFuncParams.type,
        refushReason: this.goodsFuncParams.refushReason
      })
      goodsAllFuc(para).then(res => {
        console.log(res)
        this.rejectVisible = false
        this.getGoodsList()
      })
    },
    handleClick () {
      this.clearForm()
      this.getGoodsList()
    },
    // 表格数据
    getGoodsList (type) {
      this.goodsList = []
      this.goodsParams.status = this.tabsName
      const para = Object.assign({}, this.goodsParams)
      businessGoodsList(para).then(res => {
        console.log(res)
        this.goodsList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.goodsParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.goodsParams.pageSize = val
      this.getGoodsList()
    },
    getGoodsFunc (row, type, index) {
      this.idsList = row.id
      this.goodsFuncParams.type = type
      this.goodsFuncParams.index = index
      if (type === 3) {
        this.delVisible = true
      } else if (type === 2 && index === -1) {
        this.rejectVisible = true
      } else {
        this.getGoodsAllFuc()
      }
    },
    getReject () {
      if (this.goodsFuncParams.refushReason === '') {
        MessageBox.alert('内容不能为空', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
        this.rejectVisible = false
      } else {
        this.getGoodsAllFuc()
      }
    },
    deleteRow (index) {
      this.getGoodsAllFuc()
      this.goodsList.splice(index, 1)
      this.delVisible = false
    },
    getRejectReason (row) {
      this.refushReason = row.refushReason
      this.reasonVisible = true
    },
    goGoodDialog (row) {
      this.seeVisible = true
      this.goodsInfoList.productId = row.productId
      this.getGoodsDel()
    },
    getGoodsDel () {
      const para = Object.assign({}, { productId: this.goodsInfoList.productId })
      goodsInfo(para).then(res => {
        console.log(res)
        this.goodsType = res.data.tagList
        this.goodsInfoList = res.data.product
        this.goodsInfoList.productImageList = res.data.product.productImageList
      })
    },
    goEditDialog (row) {
      this.editVisible = true
      this.goodsInfoList.productId = row.productId
      this.getGoodsDel()
    },
    getGoodsEdit () {
      this.goodsInfoList.imgs = []
      for (var i = 0; i < this.goodsInfoList.productImageList.length; i++) {
        console.log(this.goodsInfoList.productImageList[i].url)
        this.goodsInfoList.imgs.push(this.goodsInfoList.productImageList[i].url)
      }
      this.goodsInfoList.imgs = this.goodsInfoList.imgs.join(',')
      const para = Object.assign({}, this.goodsInfoList)
      goodsEdit(para).then(res => {
        console.log(res)
      })
    },
    handleGoodsLogoSuccess (res, file) {
      this.goodsInfoList.img = URL.createObjectURL(file.raw)
      this.goodsInfoList.img = JSON.parse(res.slice(5)).data.split('?')[0]
      console.log(this.goodsInfoList.img)
    },
    handleImgListSuccess (res, file) {
      console.log(res)
      img = { url: JSON.parse(res.slice(5)).data.split('?')[0] }
      this.goodsInfoList.productImageList.push(img)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.goodsInfoList.productImageList = fileList
      console.log(this.goodsInfoList.productImageList)
    },
    handlePreview (file) {
      console.log(file)
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }

    .el-dialog-div {
      max-height: 60vh;
      overflow-y: auto;

      .img-div {
        display: inline-block;
        margin: 0 0 0 10px;
      }
    }
  }
</style>
